<html>
	<head>
		<title>输入框属性设置器</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<link rel="stylesheet" href="../assets/libs/layui/css/layui.css" />
	</head>
	<body>
		<div class="layui-form layui-form-pane" style="margin: 5px;">
			<div class="layui-form-item">
				<label class="layui-form-label">唯一标识</label>
				<div class="layui-input-block">
					<input id="id" type="text" name="id" autocomplete="off" placeholder="请输入唯一标识" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<input id="title" type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">提示</label>
				<div class="layui-input-block">
					<input id="placeholder" type="text" name="placeholder" autocomplete="off" placeholder="请输入提示" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">默认值</label>
				<div class="layui-input-block">
					<input id="defaultValue" type="text" name="defaultValue" autocomplete="off" placeholder="请输入默认值" class="layui-input">
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../assets/libs/jquery.min.js"></script>
		<script type="text/javascript" language="javascript">
			var setControl = function(ctrl) {
				var input = ctrl.find('input');
				var label = ctrl.children('.layui-form-label');

				var ctrlId = $("#id");
				ctrlId.val(input.attr('id'));
				ctrlId.unbind("input propertychange");
				ctrlId.bind('input propertychange', function() {
					var val = $(this).val();
					input.attr('id', val);
					input.attr('name', val);
				})

				var title = $("#title");
				title.val(label.text());
				title.unbind("input propertychange");
				title.bind('input propertychange', function() {
					var val = $(this).val();
					label.text(val);
				})

				var placeholder = $("#placeholder");
				placeholder.val(input.attr('placeholder'));
				placeholder.unbind("input propertychange");
				placeholder.bind('input propertychange', function() {
					var val = $(this).val();
					input.attr('placeholder', val);
				})
				
				var defaultValue = $("#defaultValue");
				defaultValue.val(input.val());
				defaultValue.unbind("input propertychange");
				defaultValue.bind('input propertychange', function() {
					var val = $(this).val();
					input.val(val);
				})
			}
		</script>
	</body>
</html>
